<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/global.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/tree.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/common.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/redmond/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/jquery-ui-timepicker-addon.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/main_style.css" type="text/css" media="screen" title="no title" charset="utf-8">

<script src="js/jquery-1.7.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.blockUI.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.blockUI-css.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.tools.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.form.2.93.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ui-page.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>

<title>主界面</title>
<style>
.ErrorTip{
color:red;
}
.inputError{
border-color: red;
}
</style>
<script>
	CONTEXT_PATH = "<%=request.getContextPath()%>";
</script>
</head>

<body>
	<table id="containerTable" class="container" cellspacing="0" cellpadding="0">
		<tr style="height:80px;">
			<td class="td_container">
				<div class="page-wrapper" style="height:80px;">
					<div id="header">
						<a href="<%=request.getContextPath()%>/Index/index" id="exit" class="iconLink setting">返回</a>
					</div>
					<table cellspacing="0" cellpadding="0" class="mainContent">
						<tr>
							<td>
								<table cellspacing="0" cellpadding="0" class="right-list-table" >
									<tr style="height:80px;">
										<td style="width:100%;">
											<a href="#" name="addUser"  class="toolbar-meeting addUser" rel="#tblUserDlg">新增</a>
											<a href="#" name="changePassword"  class="hidden changePassword" rel="#tblUser_password_Dlg">修改密码</a>
											<div>
											<br/>&nbsp;&nbsp;&nbsp;&nbsp;姓名：<input type="text" name="userName" value=""/>
											登录帐号：<input type="text" name="loginId" value=""/>
											<a id="tblUSERList" href="User/query" class="toolbar-meeting searchbtn text-align:right;">查询</a>
											</div>
										</td>
									</tr>
								</table>
							</td>
					</tr>
					<tr>
						<td>
							<div>
							<div id="tblUSERListData">
								<div pagesize="30"></div>
							</div>
							<ul id="tblUSERListPage" class="page"></ul>
							</div>
						</td>
					</tr>
				</table>
					
				</div>
			</td>
		</tr>
		<tr>
			<td class="tbl-footer">
				<p>Copyright© 2011 中国移动广州分公司版权所有</p></td>
		</tr>
	</table>
	<div id="tblUserDlg" class="dialogForm hidden"  trigger="">
		<h3>用户</h3>
		<div  class="dialog-form-content">
			<form action="User/save" method="post" id="user_form">
				<field class="form-field"> 
					<input type="hidden" clear="false" name="userId" value="0"/>
					<label class="title">登录名</label> 
					<input type="text" name="loginId" class="long" required="true" editable="false"/>
					<label class="title">用户名</label>
					<input type="text" name="userName" class="long" required="true" editable="false"/>
					<label class="title">邮箱</label> 
					<input type="text" name="userEmail" class="long email" required="true"/>
					<label class="title">职位</label> 
					<input type="text" name="userPosition" class="long email" required="true"/> 
				</field>
			</form>
			<div class="buttonRegion">
				<a href="#" id="btnSaveUser" name="saveUser" dlg="tblUserDlg" class="buttonS dlgBtn"><span>确定</span></a>
				<a href="#" id="btnCancelUser" name="cancelSaveUser" dlg="tblUserDlg" class="buttonS dlgBtn"><span>取消</span></a>
			</div>
		</div>
	</div>
	<div id="tblUser_password_Dlg" class="dialogForm hidden"  trigger="">
		<h3>用户</h3>
		<div  class="dialog-form-content">
			<form action="User/resetPassword" method="post" class="password_form" id="user_password_form">
				<field class="form-field"> 
					<input type="hidden" clear="false" name="userId" />
					新密码：<input type="password" clear="false" name="newPassword" />
				</field>
			</form>
			<div class="buttonRegion">
				<a href="#" id="updatePassword" name="updatePassword" dlg="tblUser_password_Dlg" class="buttonS dlgBtn"><span>确定</span></a>
				<a href="#" id="cancelUpdatePassword" name="cancelUpdatePassword" dlg="tblUser_password_Dlg" class="buttonS dlgBtn"><span>取消</span></a>
			</div>
		</div>
	</div>
	<script type="text/javascript" charset="utf-8">
		function initUserList() {
			$("#tblUSERList").click();
		}
		function initUserForm(){
			$('#user_form').ajaxForm({
				dataType : 'json',
				success : function(data) {
					if (data.success) {
						$.ActionResponse('success', '提示', "保存数据成功！");
						hideUserFormDialog();
						$("#tblUSERList").click();
					} else {
						$.ActionResponse('error', '提示', "保存出错！"+data.data);
					}
					$.unblockUI();
				}
			});
		};
		function deleteUser(userId){
			if (!window.confirm("确认要删除用户吗？")) return;
			$.getJSON(CONTEXT_PATH + "/User/delete/" + userId ,function (data){
				if (data.success) {
					$.ActionResponse('', '删除用户', '删除成功！');	
					initUserList();
				} else {
					$.ActionResponse('', '删除用户', '删除失败！');
				}
			});
		}
		function resetUserForm(){
			$("#user_form input[name='userId']").val('0');
			$("#user_form input[name='loginId']").val('');
			$("#user_form input[name='userName']").val('');
			$("#user_form input[name='userPassword']").val('');
			$("#user_form input[name='userPosition']").val('');
			$("#user_form input[name='userEmail']").val('');
		};
		function hideUserFormDialog() {
			resetUserForm();
			$(".addUser").data('overlay').close();
		};
		function hidePasswordDialog(){
			$(".changePassword").data('overlay').close();
		};
		function updateUser(userId,userName,userPosition,userEmail,loginId) {
			$("#user_form input[name='userId']").val(userId);
			$("#user_form input[name='loginId']").val(loginId);
			$("#user_form input[name='userName']").val(userName);
			$("#user_form input[name='userPosition']").val(userPosition);
			$("#user_form input[name='userEmail']").val(userEmail);
			$("input[editable='false']").attr('readonly',true);
			$(".addUser").DialogForm(null);
		};
		function updatePassword(userId) {
			$(".changePassword").DialogForm(function(){
				$("input[name='userId']").val(userId);
			});
		}
		
		function initPasswordChangeForm(){
			$('#user_password_form').ajaxForm({
				dataType : 'json',
				success : function(data) {
					if (data.success) {
						$.ActionResponse('success', '提示', "保存数据成功！");
						hidePasswordDialog();
					} else {
						$.ActionResponse('error', '提示', "保存出错！"+data.data);
					}
					$.unblockUI();
				}
			});
		}
		$(document).ready(function(){
			initUserList();
			$(".addUser").bind("click",function(){
				resetUserForm();
				$(this).DialogForm(null);
			});
			
			$(".updatePassword").bind("click",function(){
				$(this).DialogForm(null);
			});
			$("#btnSaveUser").bind("click",function(){
				$('#user_form').submit();
			});
			$("#updatePassword").bind("click",function(){
				$('#user_password_form').submit();
			});
			$("#btnCancelUser").bind("click",hideUserFormDialog);
			$("#cancelUpdatePassword").bind("click",hidePasswordDialog);
			initUserForm();
			initPasswordChangeForm();
		});
		
		
	</script>
</body>
</html>
